<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户管理</title>
		<!--引入layui的css  -->
		<link rel="stylesheet" href="../layui/css/layui.css" />
	</head>
	<!--引入layui的js  -->
	<script type="text/javascript" src="../layui/layui.js"></script>
	<!--引入jquery的js  -->
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/global.js"></script>

	<body>
		<!-- 查询条件输入框 -->
		<div class="layui-form-item" style="margin-top: 10px;">
			<form class="layui-form" onsubmit="return false;">
				<label class="layui-form-mid">用户名:</label>
				<div class="layui-input-inline" style="width: 120px;">
					<input type="text" id="loginName" name="loginName" autocomplete="off" class="layui-input">
				</div>

				<label class="layui-form-mid">起止时间:</label>
				<div class="layui-input-inline" style="width: 120px;">
					<input type="text" id="createTime" name="createTime" placeholder="yyyy-MM-dd HH-mm-ss"
						autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-mid">--</label>
				<div class="layui-input-inline" style="width: 120px;">
					<input type="text" id="endDate" name="endDate" placeholder="yyyy-MM-dd HH-mm-ss" autocomplete="off"
						class="layui-input">
				</div>

				<label class="layui-form-mid">是否锁定:</label>
				<div class="layui-input-inline" style="width: 200px;">
					<select id="isLockout" name="isLockout">
						<option value="">请选择</option>
						<option value="是">是</option>
						<option value="否">否</option>
					</select>
				</div>

				<label class="layui-form-mid">排序:</label>
				<div class="layui-input-inline" style="width: 120px;">
					<select id="orderBy" name="orderBy">
						<option value="">请选择</option>
						<option value="lastLoginTime">最后登录时间</option>
						<option value="createTime">创建时间</option>
					</select>
				</div>

				<div class="layui-input-inline" style="width: 300px;">
					<button class="layui-btn" lay-submit lay-filter="search" id="search" data-type="reload"><i
							class="layui-icon">&#xe615;</i>搜索</button>
					<button class="layui-btn layui-btn-normal" lay-submit lay-filter="add" id="add"
						data-type="reload">添加</button>
					<a class="layui-btn layui-btn-small" style="line-height:1.6em;float:right"
						href="javascript:location.replace(location.href);" title="刷新">
						<i class="layui-icon" style="line-height:38px">&#xe666;</i>
					</a>
				</div>
			</form>
		</div>

		<!--角色的弹层页面  -->
		<div id="editRoleLayer" style="display: none; margin-top: 20px;">
			<form class="layui-form" lay-filter="editRoleForm" id="editRoleForm" action="">
				<div id="test1" class="demo-transfer"></div>
			</form>
		</div>

		<!-- 修改的弹层页面  -->
		<div id="editLayer" style="display: none; margin-top: 20px;">
			<form class="layui-form" lay-filter="editForm" id="editForm" action="">
				<div class="layui-form-item">
					<label class="layui-form-label">登录名:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="loginName" name="loginName" class="layui-input" lay-verify="required|zf">
						<input type="hidden" name="id" />
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">邮箱:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="protectEMail" name="protectEMail" class="layui-input"
							lay-verify="required|email">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">手机号:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="protectMTel" name="protectMTel" class="layui-input"
							lay-verify="required|phone">
					</div>
				</div>
				<div class="layui-btn-container" style="text-align: center;">
					<button class="layui-btn" lay-filter="editSubmit" lay-submit="">修改</button>
				</div>
			</form>
		</div>

		<!-- 重置密码的弹层页面  -->
		<div id="editPwdLayer" style="display: none; margin-top: 20px;">
			<form class="layui-form" lay-filter="editPwdForm" id="editPwdForm" action="">
				<div class="layui-form-item">
					<label class="layui-form-label">用户名:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="hidden" id="id1" name="id" />
						<input type="text" id="un" name="loginName" class="layui-input">
					</div>
				</div>
				<div class="layui-btn-container" style="text-align: center;">
					<button class="layui-btn" lay-filter="editPwdSubmit" lay-submit="">重置</button>
				</div>
			</form>
		</div>


		<!-- 新增的弹层页面  -->
		<div id="addLayer" style="display: none; margin-top: 20px;">
			<form class="layui-form" lay-filter="addForm" id="addForm" action="">
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>登录名:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="loginName" name="loginName" lay-reqtext="用户名不能为空" class="layui-input" value="" lay-verify="required|isuser">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>密码:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="password" name="password" class="layui-input" lay-verify="required|pwd">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>邮箱:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="protectEMail" name="protectEMail" class="layui-input"
							lay-verify="required|email">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>手机号:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="protectMTel" name="protectMTel" class="layui-input"
							lay-verify="required|phone">
					</div>
				</div>
				<div class="layui-btn-container" style="text-align: center;">
					<button class="layui-btn" lay-filter="addSubmit" lay-submit="">添加</button>
				</div>
			</form>
		</div>

		<!--定义数据表格table  -->
		<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>

		<!--表格数据里的编辑、查看等操作按钮  -->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="editRole">角色</a>
			<a class="layui-btn layui-btn-xs layui-btn-small" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
			<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="resetPwd">密码重置</a>
		</script>

		<!-- 开关1（既能开也能关） -->
		<script type="text/html" id="switchBar1">
			<input type="checkbox" data-id="{{d.id}}" name="id" lay-filter="isLockSwitch" lay-skin="switch" lay-text="是|否"
				{{d.isLockout=="是" ? "checked":"否"}}>
		</script>



		<script>
			layui.use(['laydate', 'layer', 'form', 'table', 'tree', 'upload', 'transfer'], function() {
				var laydate = layui.laydate //日期组件
					,
					layer = layui.layer //弹层组件
					,
					form = layui.form //表单组件
					,
					upload = layui.upload //上传组件
					,
					tree = layui.tree //树形结构组件
					,
					$ = layui.$ //jQuery
					,
					table = layui.table,
					transfer = layui.transfer; //表格组件

				//日期控件
				laydate.render({
					elem: '#createTime',
					type: 'datetime'
				});
				laydate.render({
					elem: '#endDate',
					type: 'datetime'
				});

				//渲染表格，填充数据
				table.render({
					elem: '#proTable', //对应上面定义的表格ID
					url: "" + globalData.server + "user/GetUsersLayUI", //提交到后台的地址
					method: 'post', //提交方式 get或者post
					where: {
						"token": globalData.token
					},
					even: true, //表格隔行变色
					page: true, //开启分页
					toolbar: false, //开启头部工具栏，并为其绑定左侧模板
					title: '产品表', //表格名称
					cols: [
						[{
							field: 'id', //对应实体类里的属性    （必需有）
							fixed: 'left', //固定方式，left左固定，right右固定 （可选）
							align: 'center', //排列方式：left左对齐，center居中，right右对齐（可选）
							title: '用户id', //表头名称			（必需有）
							sort: true //开启排序（可选）
						}, {
							field: 'loginName',
							title: '用户名'
						}, {
							field: 'protectEMail',
							title: '邮箱'
						}, {
							field: 'protectMTel', //对应实体类里的属性
							title: '手机号码' //表头名称
						}, {
							field: 'isLockout',
							title: '是否锁定',
							toolbar: '#switchBar1'
						}, {
							field: 'createTime',
							title: '创建时间'
						}, {
							field: 'lastLoginTime',
							title: '最后登录时间'
						}, {
							fixed: 'right',
							title: '操作',
							width: 300,
							toolbar: '#barDemo'
						}]
					]
				});


				form.verify({
					//数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
					zf: [/^.{2,}$/, '登录名不少于 2 个字符'],
					pwd: [/^.{5,}$/, '密码不少于 5 个字符'],
					phone: [/^[1][3,5,7,8]\d{9}$/]
				});
				
				form.verify({
					//将用户名是否可用作为验证条件 表单提交时触发
					isuser:function(value){
						var loginName = value;
						var message = '';
						//console.log(datas)
						//var str = datas + "&token=" + globalData.token;
						$.ajax({
							type:"POST",
							url:"" + globalData.server + "user/selectRepetition",  //指的是 对应后台的方法
							async: false, //改为同步请求
							//contentType:'application/json;charset=UTF-8',
							data:{"loginName":loginName,"token":globalData.token},//JSON.stringify(datas)
							dataType:'json',
							success:function(data){
								if(data){
				
								}else{
									message ="用户名已存在，请重新输入！"
								}
							}
						});
						//需要注意 需要将返回信息写在ajax方法外
						if (message !== ''){
							return message
						}
					}
				});

				// 处理开关点击时把信息传入到后台进行修改（isLockSwitch写对应开关的lay-filter值即可）
				form.on('switch(isLockSwitch)', function(data) {
					var id = $(this).attr('data-id');
					var valid = this.checked ? 'on' : 'off'; //获取到点击后的开关状态（on/off）
					var x = data.elem.checked; //获取到点击后的开关状态（true/false）
					layer.open({
						content: '确定要修改状态吗？' //给用户的友好提示
							,
						btn: ['确定', '取消'],
						yes: function(index, layero) {
							data.elem.checked = x;
							layer.close(index);
							if (valid == "on") {
								$.ajax({
									type: "POST",
									url: "" + globalData.server + "user/LockUser",
									data: {
										"id": id,
										"valid": valid,
										"token": globalData.token
									},
									success: function(res) {
										if (res) {
											layer.msg("锁定用户成功！！！");
										} else {
											layer.msg("锁定用户失败！！！");
										}
										form.render();
									},
									error: function() {}
								});
							} else {
								$.ajax({
									type: "POST",
									url: "" + globalData.server + "user/UnLockUser",
									data: {
										"id": id,
										"valid": valid,
										"token": globalData.token
									},
									success: function(res) {
										if (res) {
											layer.msg("启动用户成功！！！");
										} else {
											layer.msg("启动用户失败！！！");
										}
										form.render();
									},
									error: function() {}
								});
							}
						},
						btn2: function(index, layero) {
							//按钮【按钮二】的回调
							data.elem.checked = !x;
							form.render();
							layer.close(index);
							//return false 开启该代码可禁止点击该按钮关闭
						},
						cancel: function() {
							//右上角关闭回调
							data.elem.checked = !x;
							form.render();
							//return false 开启该代码可禁止点击该按钮关闭
						}
					});
					form.render();
					return false;
				});

				/*
					条件查询	submit 对应 lay-submit  search 对应 lay-filter
				*/
				form.on('submit(search)', function(data) {
					var field = data.field; //获取所有的输入条件值
					//执行重载
					table.reload('proTable', {
						page: {
							curr: 1
						}, // 重载后回到第一页
						where: field // 把所有的输入值传给后台
					});
				});

				form.on('submit(add)', function(data) {
					//清空新增页面的表单内容，防止上次输入的数据还在
					$("#addForm")[0].reset();
					//打开新增的弹层
					layer.open({
						type: 1,
						title: '您正在新增用户',
						content: $('#addLayer'),
						area: ['500px', '400px']
					});
				});


				//新增弹层的提交按钮
				form.on('submit(addSubmit)', function(data) {
					var str = $("#addForm").serialize() + "&token=" + globalData.token;
					$.ajax({
						type: 'post', //提交方式get或post
						url: "" + globalData.server + "user/CreateUser", //提交路径
						data: str, //参数
						dataType: 'json',
						success: function(res) { //提交成功
							layer.closeAll(); //关闭弹层
							layer.alert("添加成功！！！"); //提示信息
							table.reload('proTable'); // 修改后要刷新表格
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					});

					return false;
				});




				//数据表格里的事件监听
				table.on('tool(filterTable)', function(obj) {
					var data = obj.data; //获取当前行的数据

					switch (obj.event) {
						case 'editRole': //修改操作
							//获取穿梭框左边数据
							$.ajax({
								type: 'post',
								url: globalData.server + "roles/GetRolesAll",
								data: {
									"token": globalData.token
								},
								dataType: 'json',
								success: function(res) {
									var zuo = res;

									//获取穿梭框右边数据
									var you = new Array();
									$.ajax({
										type: 'post',
										url: globalData.server + "roles/getRolesByUid",
										data: {
											"id": data.id,
											"token": globalData.token
										},
										dataType: 'json',
										success: function(res) {
											if (res.count > 0) {
												for (var i = 0; i < res.data
													.length; i++) {
													you.push(res.data[i].id);
												}
											}

											//渲染穿梭框
											transfer.render({
												elem: '#test1',
												title: ['系统所有角色', '当前用户的角色'],
												data: zuo,
												value: you,
												parseData: function(udata) {
													return {
														"value": udata
														.id, //数据值
														"title": udata
															.name //数据标题
													}
												},
												onchange: function(obj, index) {
													if (index == "0") {
														//新增用户角色
														for (var i = 0; i <
															obj.length; i++
															) {
															$.ajax({
																type: "post",
																url: "" +
																	globalData
																	.server +
																	"user/AddUserToRole",
																data: {
																	"userid": data
																		.id,
																	"roleid": obj[
																			i
																			]
																		.value,
																	"token": globalData
																		.token
																},
																dataType: 'json',
																success: function(
																	res
																	) { //提交成功

																},
																error: function() { //提交失败
																	alert
																		(
																			"系统异常！！")
																}
															});
														}

													} else {
														//删除用户角色
														for (var i = 0; i <
															obj.length; i++
															) {
															$.ajax({
																type: "post",
																url: "" +
																	globalData
																	.server +
																	"user/RemoveUserFromRole",
																data: {
																	"userid": data
																		.id,
																	"roleid": obj[
																			i
																			]
																		.value,
																	"token": globalData
																		.token
																},
																dataType: 'json',
																success: function(
																	res
																	) { //提交成功

																},
																error: function() { //提交失败
																	alert
																		(
																			"系统异常！！")
																}
															});
														}

													}
												}
											});
										},
										error: function() {
											alert("获取失败！！！")
										}
									});
								},
								error: function() {
									alert("获取失败！！！")
								}
							});

							//打开穿梭框弹层
							layer.open({
								type: 1,
								title: '您正在设置用户[' + data.loginName + ']的角色',
								content: $("#editRoleLayer"),
								area: ['500px', '400px'],
								fixed: false, //不固定
								maxmin: true,
								offset: '10px'
							});
							break;
						case 'edit': //修改操作
							//数据的回显
							form.val("editForm", data);
							//							$("#loginName").val(data.LoginName);
							//							$("#email").val(data.ProtectEMail);
							//							$("#mtel").val(data.ProtectMTel);
							//打开弹层
							layer.open({
								type: 1,
								title: '您正在修改编号【' + data.id + '】的信息',
								content: $('#editLayer'),
								area: ['800px', '600px']
							});
							break;
						case 'del': //删除操作
							if (confirm("确定删除吗？")) {
								$.ajax({
									type: 'post', //提交方式get或post
									url: "" + globalData.server + "user/DeleteUser", //提交路径
									data: {
										"id": data.id,
										"token": globalData.token
									}, //参数
									dataType: 'json', //返回的数据类型
									success: function(res) { //提交成功
										layer.alert("删除成功！！！"); //提示信息
										table.reload('proTable'); // 修改后要刷新表格
									},
									error: function() { //提交失败
										alert("系统异常！！")
									}
								});
							}
							break;
						case 'resetPwd': //重置密码操作
							$("#un").val(data.loginName);
							$("#id1").val(data.id);
							//打开弹层
							layer.open({
								type: 1,
								title: '您正在修改编号【' + data.id + '】的信息',
								content: $('#editPwdLayer'),
								area: ['800px', '600px']
							});
							break;
					};
				})

				//修改弹层的提交按钮
				form.on('submit(editSubmit)', function(data) {
					$.ajax({
						type: 'post', //提交方式get或post
						url: "" + globalData.server + "user/UpdateUser", //提交路径
						data: $("#editForm").serialize() + "&token=" + globalData.token, //参数
						dataType: 'json', //返回的数据类型
						success: function(res) { //提交成功
							layer.closeAll(); //关闭弹层
							layer.alert("修改成功！！！"); //提示信息
							table.reload('proTable'); //刷新表格
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					});
					return false;
				});

				//重置密码弹层的提交按钮
				form.on('submit(editPwdSubmit)', function(data) {
					$.ajax({
						type: 'post', //提交方式get或post
						url: "" + globalData.server + "user/ResetPassword", //提交路径
						data: $("#editPwdForm").serialize() + "&token=" + globalData.token, //参数
						dataType: 'json', //返回的数据类型
						success: function(res) { //提交成功
							layer.closeAll(); //关闭弹层
							layer.alert("修改成功！！！"); //提示信息
							table.reload('proTable'); //刷新表格
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					});
					return false;
				});
			});
		</script>
	</body>
</html>
